<template>
  <div id="main">
  </div>
</template>

<script>
  import echarts from 'echarts';

  export default {
    name: "anli",
    mounted() {
      const graph = {  //这是数据项目中一般都是获取到的
        nodes: [
          {"id": "0", "name": "昆山XX设计有限公司0"},
          {"id": "1", "name": "上海XX设计有限公司1"},
          {"id": "2", "name": "赵某某2"},
          {"id": "3", "name": "主要人员3"},
          {"id": "4", "name": "苏州XX实业有限公司4"}
        ],
        links: [
          {"id": "0", "source": "0", "target": "2"},
          {"id": "1", "source": "1", "target": "2"},
          {"id": "2", "source": "2", "target": "3"},
          {"id": "3", "source": "3", "target": "1"},
          {"id": "4", "source": "4", "target": "0"},]
      };

      const winWidth = document.body.clientWidth;
      const winHeight = document.body.clientHeight;
      const myChart = echarts.init(this.$el);
      const option = {    //这里是option配置
        animationDurationUpdate: 1500,//数据更新动画的时长。
        animationEasingUpdate: 'quinticInOut',//数据更新动画的缓动效果。
        series: [
          {
            type: 'graph',
            layout: 'force',           //因为节点的位置已经有了就不用在这里使用布局了
            //circular: { rotateLabel: true },
            //animation: false,
            data: graph.nodes,
            links: graph.links,
            roam: true,   //添加缩放和移动
            draggable: true,//这里设置为false，不然拖拽鼠标和节点有偏移
            itemStyle: {//配置节点的颜色已及尺寸
              normal: {
                // （1） 直接写一个颜色，这样的结果是所有节点都是同一个颜色
                //color: '#fff',
                // （2） 像在全局定义中一样，使用数组声明多个颜色
                //        但是这样的结果是所有颜色都变成黑色（大概是不允许这样用吧）
                //color: ['#fc853e','#28cad8','#9564bf','#bd407e','#28cad8','#fc853e','#e5a214'],
                // （3） 类似柱状图定义多个颜色，利用函数返回不同的颜色值
                //        结果同上，全变成黑色了
                color: function (params) {
                  const colorList = ['red', 'orange', 'green', 'blue', 'purple'];
                  return colorList[params.dataIndex]
                },

              }
            },
            symbolSize: function (value, params) {//改变节点大小
              const SizeList = [40, 45, 50, 55, 60];
              return SizeList[params.dataIndex]
            },

            label: {
              normal: {
                show: true,
                position: 'bottom',
                rich: {
                  bg: {
                    backgroundColor: '#f5f5f5'
                  }
                }
              }
            },
            force: {
              edgeLength: [10, winWidth / 2]
            }
          }
        ]
      };
      myChart.setOption(option);


      //点击事件
      myChart.on('click', function (params) {
        if (params.dataType == 'node') {
          if (params.name == "昆山XX设计有限公司0") {
            window.location = "https://www.baidu.com";
          }
        }
      });
    }
  }
</script>

<style scoped>
#main{
  height: 100%;
  width: auto;
}
</style>
